<eda-dialog [inject]="dialog">
  
  <div body class=grid>

    <div class="col-12" style=" background-color: var(--panel-color); margin: 2em; width: 90%; height: 15vh;">
      <panel-chart *ngIf="display" #PanelChartComponent [props]="panelChartConfig">
      </panel-chart>
    </div>



    <div class="col-12">
      <h6 i18n="@@DynamicTextColor" class="custom-border-b1">
       Cambiar Color
      </h6>

      <div class="grid">

        <div class="col-2">
          <h6 i18n="@@colorKpiH6">
            Color
          </h6>
          <div class="chart-color-selection">
            
            <div class="mb-1">
              <input type="text" [(ngModel)]="color" pInputText style="width: 40%"  (keyup)="handleInputColor()"  (onChange)="handleInputColor()"   />
              <p-colorPicker [(ngModel)]="color" appendTo="body" (onChange)="handleInputColor()"  ></p-colorPicker>

            </div>         
          </div>  
        </div>
      </div>
  
    </div>
  </div>




  <div footer>
    <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">
      <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check" class="p-button-raised p-button-success"
        i18n-label="@@guardarButton" label="Confirmar" id="eda_chart_dialog_confirmar">
      </button>
      <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times" class="p-button-raised p-button-danger"
        i18n-label="@@cancelarButton" label="Cancelar">
      </button>
    </div>
  </div>

</eda-dialog>
